<template>
  <div id="Photo">
	<div class="Home-top">
        <span class="Home-left"><img v-bind:src="imga"/></span>
        <span class="Home-center" @click="fun($event)">{{find}}</span>
        <span class="Home-right"><img v-bind:src="imgb"/></span>
    </div>
    <div class="photo-text" f>
    	<h1>{{messsage}}</h1>
    	<p>{{messade}}</p>
    	
    </div>
    <div class="photo-logo">
    	<img v-bind:src="photologo">
    	<img v-bind:src="photologo">
    	<img v-bind:src="photologo">
    </div>
    <div class="photo-logo">
    	<img v-bind:src="photologo">
    	<img v-bind:src="photologo">
    	<img v-bind:src="photologo">
    </div>
    <div class="photo-btn">
    	<span>{{photobtn}}</span>
    </div>
	<div class="photo-gerry"></div>
	<nav>
  	<ul>
  		<li v-for="(tab,index) in tabs" @click="tabIndex = index" 
		    	:class="{active:tabIndex == index}">{{tab.lis}}
		    		
	</li>
  	</ul>
  	
		<div class="out" v-show="tabIndex == 0">
			<div class="Home-taba">
			<p class="onespan">{{tabaspan}}</p>
			<p class="twospan">{{twospan}}</p>
			</div>
			<div class="Photo-ttta">
				<img v-bind:src="Photobig"/>
				<img v-bind:src="Photobbig"/>
			</div>
			<div class="Photo-tttb">
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
			</div>
			<div class="photo-p">
				<p><a>#家有神器#</a>{{photoppp}}<a>展开全部</a></p>
				<h2>{{photohhh}}</h2>
				<div>{{messadde}}</div>
				<h5></h5>
			</div>
			<div class="Home-taba">
			<p class="onespan">{{tabaspan}}</p>
			<p class="twospan">{{twospan}}</p>
			</div>
			<div class="Photo-ttta">
				<img v-bind:src="Photobig"/>
				<img v-bind:src="Photobbig"/>
			</div>
			<div class="Photo-tttb">
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
			</div>
			<div class="photo-p">
				<p><a>#家有神器#</a>{{photoppp}}<a>展开全部</a></p>
				<h2>{{photohhh}}</h2>
				<div>{{messadde}}</div>
				<h5></h5>
			</div>

		</div>
		<div class="out1" v-show="tabIndex == 1">
		<div class="Home-taba">
			<p class="onespan">{{tabaspan}}</p>
			<p class="twospan">{{twospan}}</p>
			</div>
			<div class="Photo-ttta">
				<img v-bind:src="Photobig"/>
				<img v-bind:src="Photobbig"/>
			</div>
			<div class="Photo-tttb">
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
			</div>
			<div class="photo-p">
				<p><a>#家有神器#</a>{{photoppp}}<a>展开全部</a></p>
				<h2>{{photohhh}}</h2>
				<div>{{messadde}}</div>
				<h5></h5>
			</div>
			<div class="Home-taba">
			<p class="onespan">{{tabaspan}}</p>
			<p class="twospan">{{twospan}}</p>
			</div>
			<div class="Photo-ttta">
				<img v-bind:src="Photobig"/>
				<img v-bind:src="Photobbig"/>
			</div>
			<div class="Photo-tttb">
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
			</div>
			<div class="photo-p">
				<p><a>#家有神器#</a>{{photoppp}}<a>展开全部</a></p>
				<h2>{{photohhh}}</h2>
				<div>{{messadde}}</div>
				<h5></h5>
			</div>
		</div>
		<div class="out2" v-show="tabIndex == 2">
		<div class="Home-taba">
			<p class="onespan">{{tabaspan}}</p>
			<p class="twospan">{{twospan}}</p>
			</div>
			<div class="Photo-ttta">
				<img v-bind:src="Photobig"/>
				<img v-bind:src="Photobbig"/>
			</div>
			<div class="Photo-tttb">
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
			</div>
			<div class="photo-p">
				<p><a>#家有神器#</a>{{photoppp}}<a>展开全部</a></p>
				<h2>{{photohhh}}</h2>
				<div>{{messadde}}</div>
				<h5></h5>
			</div><div class="Home-taba">
			<p class="onespan">{{tabaspan}}</p>
			<p class="twospan">{{twospan}}</p>
			</div>
			<div class="Photo-ttta">
				<img v-bind:src="Photobig"/>
				<img v-bind:src="Photobbig"/>
			</div>
			<div class="Photo-tttb">
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
			</div>
			<div class="photo-p">
				<p><a>#家有神器#</a>{{photoppp}}<a>展开全部</a></p>
				<h2>{{photohhh}}</h2>
				<div>{{messadde}}</div>
				<h5></h5>
			</div>
		</div>
		<div class="out3" v-show="tabIndex == 3">
		<div class="Home-taba">
			<p class="onespan">{{tabaspan}}</p>
			<div>
			<label @click="flag=!flag">
			<p class="twospan" v-if="flag">{{twospan}}</p>
			<p class="twospan" v-if="!flag">{{twospan2}}</p>
			</label>
			</div>
			</div>
			<div class="Photo-ttta">
				<img v-bind:src="Photobig"/>
				<img v-bind:src="Photobbig"/>
			</div>
			<div class="Photo-tttb">
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
				<img v-bind:src="Photosig"/>
			</div>
			<div class="photo-p">
				<p><a>#家有神器#</a>{{photoppp}}<a>展开全部</a></p>
				<h2>{{photohhh}}</h2>
				<div>{{messadde}}</div>
				<h5></h5>
			</div>
		</div>
  		
  	
  </nav>
       <footer>
     <router-link to='/'>
         <dl>
            <dt><img v-bind:src="homefo"/></dt>
             <dd>首页</dd>
         </dl>
     </router-link>
         <dl>
            <router-link to='/fangan'>
            <dt><img v-bind:src="homefo"/></dt>
            <dd>方案</dd>
            </router-link>
         </dl>
         <router-link to='/Photo'>
         <dl>
            <dt><img v-bind:src="homefo"/></dt>
             <dd>晒家</dd>
         </dl>
     </router-link>
     <router-link to='/main_two'>
         <dl>
            <dt><img v-bind:src="homefo"/></dt>
             <dd>攻略</dd>
         </dl>
     </router-link>
         <router-link to='/haowu'>
         <dl>
            <dt><img v-bind:src="homefo"/></dt>
             <dd>好物</dd>
         </dl>
     </router-link>
     </footer>
    
  </div>
  

</template>

<script>
export default {
  name: 'Photo',
  data() {
      return{
      	flag:true,
      	homefo:"../../static/img/homefote.png",
        imga:"../../static/img/homedenglu.png",
        imgb:"../../static/img/homesearch.png",
        photologo:"../../static/img/photologo.png",
        Photobig:"../../static/img/photobig.png",
        Photobbig:"../../static/img/photobbing.png",
        Photosig:"../../static/img/photosam.png",
        find:"晒家",
        messsage:"【晒家活动】卧室の韵",
        messade:"晒晒卧室的别样风味-第二辑",
        photobtn:"查看往期",
        tabaspan:"举个栗子",
        twospan:"关注",
        twospan2:"未关注",
        photoppp:"之前上过图的网购鞋柜，服务不错，质量一般，1400就是刨花板材质的。把手是我自己换的为了和家里其他家具统一，把手也是...",
        photohhh:"查看全部评论",
        messadde:"评论",
        tabIndex:0,
        tabs:[
        {lis:'全部',},
        {lis:'入住',},
        {lis:'施工ING',},
        {lis:'设计师推荐',},
        ]
    }
    
  },
   methods: {
            fun(e){
               e.target.style.backgroundColor =  "#"+Math.floor(Math.random()*0xffffff).toString(16);
            }
   }
}
</script>

<style scoped lang="less">
@import url(../assets/less/Photo.less);
.active{
	border-bottom:5px solid #a2cf07;
	color:#a2cf07;
}
.flag{}
</style>
